<template>
  <div>
    <nav-bar title="环境监测"></nav-bar>
    <div class="environmentalMonitor maxinBox">
      <van-tabs v-model="active" type="card" class="tabContent backgroundfff" @change="getData">
        <van-tab v-for="(item, index) in tabList" :title="item" :key="index">
          <el-row>
            <el-col :span="12" class="title">
              <span style='margin: 0.3125rem;border-left: 0.125rem solid #1577FF;padding-left: 0.3125rem;'>实时检查</span>
            </el-col>
            <el-col :span="12" style="text-align: right;">
              <div v-if="index === 0 && windData" style="padding-right: 1.25rem;">
                <span v-if="windData.status">正常</span>
                <span v-else>预警</span>
              </div>
              <div v-if="index === 1 && temperatureData" style="padding-right: 1.25rem;">
                <span v-if="temperatureData.status">正常</span>
                <span v-else>预警</span>
              </div>
              <div v-if="index === 2 && noiseData" style="padding-right: 1.25rem;">
                <span v-if="noiseData.status">正常</span>
                <span v-else>预警</span>
              </div>
              <div v-if="index === 3 && dustData" style="padding-right: 1.25rem;">
                <span v-if="dustData.status">正常</span>
                <span v-else>预警</span>
              </div>
            </el-col>
          </el-row>
          <my-echarts v-if="index === 0" id="myChat8" :options="chatDataRealTime"></my-echarts>
          <my-echarts v-if="index === 1" id="myChat9" :options="chatDataRealTime1"></my-echarts>
          <my-echarts v-if="index === 2" id="myChat10" :options="chatDataRealTime2"></my-echarts>
          <my-echarts v-if="index === 3" id="myChat11" :options="chatDataRealTime3"></my-echarts>
          <div style="text-align: center;">
            <p v-if="windData && index === 0">当前风速： {{windData.value1}}m/s</p>
            <p v-if="noiseData && index === 2">当前噪音： {{noiseData.value1}}db</p>
            <p v-if="temperatureData && index === 1">当前温度： {{temperatureData.value1}}℃</p>
            <p v-if="dustData && index === 3">当前扬尘： {{dustData.value1}}PM2.5</p>
          </div>
           <div v-if="index === 0">
             <div class="title">
               <div>风速日统计(单位:m/s)</div>
             </div>
            <my-echarts id="myChat" :options="chatDataDay"></my-echarts>
            <div class="title">
              <div>风速月统计(单位:m/s)</div>
            </div>
            <my-echarts id="myChat1" :options="chatDataMonth"></my-echarts>
          </div>
          <div v-if="index === 1">
            <div class="title">
              <div>温度日统计(单位: ℃)</div>
            </div>
            <my-echarts id="myChat2" :options="chatDataDay1"></my-echarts>
            <div class="title">
              <div>温度月统计(单位: ℃)</div>
            </div>
            <my-echarts id="myChat3" :options="chatDataMonth1"></my-echarts>
          </div>
          <div v-if="index === 2">
            <div class="title">
              <div>噪音日统计(单位: dB)</div>
            </div>
            <my-echarts id="myChat4" :options="chatDataDay2"></my-echarts>
            <div class="title">
              <div>噪音月统计(单位: dB)</div>
            </div>
            <my-echarts id="myChat5" :options="chatDataMonth2"></my-echarts>
          </div>
          <div v-if="index === 3">
            <div class="title">
              <div>扬尘日统计(单位：μg/m3)</div>
            </div>
            <my-echarts id="myChat6" :options="chatDataDay3"></my-echarts>
            <div class="title">
              <div>扬尘月统计(单位：μg/m3)</div>
            </div>
            <my-echarts id="myChat7" :options="chatDataMonth3"></my-echarts>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import MyEcharts from '../../../components/MyChart.vue'
  var colorSet = [
      [1, '#15337C']
  ];
  var rich = {
      white: {
          fontSize: 20,
          color: '#fff',
          fontWeight: '500',
          padding: [-150, 0, 0, 0]
      },
      bule: {
          fontSize: 50,
          fontFamily: 'DINBold',
          color: '#fff',
          fontWeight: '700',
          padding: [-120, 0, 0, 0],
      },
      radius: {
          width: 350,
          height: 80,
          borderWidth: 1,
          borderColor: '#0092F2',
          fontSize: 50,
          color: '#fff',
          backgroundColor: '#1B215B',
          borderRadius: 20,
          textAlign: 'center',
      },
      size: {
          height: 400,
          padding: [100, 0, 0, 0]
      }
  }
  import environmentalMonitorAPI from '../../../api/workAPI/environmentalMonitorAPI.js'
  export default {
    components: {
      MyEcharts
    },
    data() {
      return {
        status: '',
        active: 0,
        chatDataRealTime: {
          tooltip: {
              formatter: "{a} <br/>{b} : {c}%"
          },
          series: [{ //内圆
                  type: 'pie',
                  radius: '85%',
                  center: ['50%', '50%'],
                  z: 0,
                  itemStyle: {
                      normal: {
                          color: this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
                                  offset: 0,
                                  color: 'rgba(17,24,43,0)'
                              },
                              {
                                  offset: .5,
                                  // color: '#1E2B57'
                                  color:'rgba(28,42,91,.6)'
                              },
                              {
                                  offset: 1,
                                  color: '#141C33',
                                  // color:'rgba(17,24,43,0)'
                              }
                          ], false),
                          label: {
                              show: false
                          },
                          labelLine: {
                              show: false
                          }
                      },
                  },
                  hoverAnimation: false,
                  label: {
                      show: false,
                  },
                  tooltip: {
                      show: false
                  },
                  data: [100],
              },
              {
                  type: 'gauge',
                  name: '外层辅助',
                  radius: '74%',
                  startAngle: '225',
                  endAngle: '-45',
                  splitNumber: '100',
                  pointer: {
                      show: false
                  },
                  detail: {
                      show: false,
                  },
                  data: [{
                      value: 1
                  }],
                  // data: [{value: 1, name: 90}],
                  title: {
                      show: true,
                      offsetCenter: [0, 30],
                      textStyle: {
                          color: '#666',
                          fontStyle: 'normal',
                          fontWeight: 'normal',
                          fontFamily: '微软雅黑',
                          fontSize: 20,
                      }
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: [
                              [1, '#00FFFF']
                          ],
                          width: 2,
                          opacity: 1
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: true,
                      length: 20,
                      lineStyle: {
                          color: '#051932',
                          width: 0,
                          type: 'solid',
                      },
                  },
                  axisLabel: {
                      show: false
                  }
              },
              {
                  type: 'gauge',
                  radius: '70%',
                  startAngle: '225',
                  endAngle: '-45',
                  pointer: {
                      show: false
                  },
                  detail: {
                      formatter: function(value) {
                          var num = Math.round(value);
                          return '{bule|' + num + '}{white|m/s}' + '{size|' + '}';
                      },
                      rich: rich,
                      "offsetCenter": ['0%', "0%"],
                  },
                  data: [{
                      value: '',
                      name: '当前风速',
                  }],
                  title: {
                      show: false,
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: colorSet,
                          width: 25,
                          // shadowBlur: 15,
                          // shadowColor: '#B0C4DE',
                          shadowOffsetX: 0,
                          shadowOffsetY: 0,
                          opacity: 1
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: false,
                      length: 25,
                      lineStyle: {
                          color: '#00377a',
                          width: 2,
                          type: 'solid',
                      },
                  },
                  axisLabel: {
                      show: false
                  },
              },
              {
                  name: '灰色内圈', //刻度背景
                  type: 'gauge',
                  z: 2,
                  radius: '60%',
                  startAngle: '225',
                  endAngle: '-45',
                  //center: ["50%", "75%"], //整体的位置设置
                  axisLine: { // 坐标轴线
                      lineStyle: { // 属性lineStyle控制线条样式
                          color: [
                              [1, '#018DFF']
                          ],
                          width: 2,
                          opacity: 1, //刻度背景宽度
                      }
                  },
                  splitLine: {
                      show: false
                  },
                  // data: [{
                  //     show: false,
                  //     value: '80'
                  // }], //作用不清楚
                  axisLabel: {
                      show: false
                  },
                  pointer: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  detail: {
                      show: 0
                  }
              },
              {
                  name: "白色圈刻度",
                  type: "gauge",
                  radius: "60%",
                  startAngle: 225, //刻度起始
                  endAngle: -45, //刻度结束
                  z: 4,
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      length: 16, //刻度节点线长度
                      lineStyle: {
                          width: 2,
                          color: 'rgba(1,244,255, 0.9)'
                      } //刻度节点线
                  },
                  axisLabel: {
                      color: 'rgba(255,255,255,0)',
                      fontSize: 12,
                  }, //刻度节点文字颜色
                  pointer: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          opacity: 0
                      }
                  },
                  detail: {
                      show: false
                  },
                  data: [{
                      value: 0,
                      name: ""
                  }]
              },
              { //内圆
                  type: 'pie',
                  radius: '56%',
                  center: ['50%', '50%'],
                  z: 1,
                  itemStyle: {
                      normal: {
                          color: this.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                                  offset: 0,
                                  color: '#4978EC'
                              },
                              {
                                  offset: .5,
                                  color: '#1E2B57'
                              },
                              {
                                  offset: 1,
                                  color: '#141F3D'
                              }
                          ], false),
                          label: {
                              show: false
                          },
                          labelLine: {
                              show: false
                          }
                      },
                  },
                  hoverAnimation: false,
                  label: {
                      show: false,
                  },
                  tooltip: {
                      show: false
                  },
                  data: [100],
              },
          ]
        },
        chatDataRealTime1: {
          tooltip: {
              formatter: "{a} <br/>{b} : {c}%"
          },
          series: [{ //内圆
                  type: 'pie',
                  radius: '85%',
                  center: ['50%', '50%'],
                  z: 0,
                  itemStyle: {
                      normal: {
                          color: this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
                                  offset: 0,
                                  color: 'rgba(17,24,43,0)'
                              },
                              {
                                  offset: .5,
                                  // color: '#1E2B57'
                                  color:'rgba(28,42,91,.6)'
                              },
                              {
                                  offset: 1,
                                  color: '#141C33',
                                  // color:'rgba(17,24,43,0)'
                              }
                          ], false),
                          label: {
                              show: false
                          },
                          labelLine: {
                              show: false
                          }
                      },
                  },
                  hoverAnimation: false,
                  label: {
                      show: false,
                  },
                  tooltip: {
                      show: false
                  },
                  data: [100],
              },
              {
                  type: 'gauge',
                  name: '外层辅助',
                  radius: '74%',
                  startAngle: '225',
                  endAngle: '-45',
                  splitNumber: '100',
                  pointer: {
                      show: false
                  },
                  detail: {
                      show: false,
                  },
                  data: [{
                      value: 1
                  }],
                  // data: [{value: 1, name: 90}],
                  title: {
                      show: true,
                      offsetCenter: [0, 30],
                      textStyle: {
                          color: '#666',
                          fontStyle: 'normal',
                          fontWeight: 'normal',
                          fontFamily: '微软雅黑',
                          fontSize: 20,
                      }
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: [
                              [1, '#00FFFF']
                          ],
                          width: 2,
                          opacity: 1
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: true,
                      length: 20,
                      lineStyle: {
                          color: '#051932',
                          width: 0,
                          type: 'solid',
                      },
                  },
                  axisLabel: {
                      show: false
                  }
              },
              {
                  type: 'gauge',
                  radius: '70%',
                  startAngle: '225',
                  endAngle: '-45',
                  pointer: {
                      show: false
                  },
                  detail: {
                      formatter: function(value) {
                          var num = Math.round(value);
                          return '{bule|' + num + '}{white|℃}' + '{size|' + '}\n{radius|综合健康评分}';
                      },
                      rich: rich,
                      "offsetCenter": ['0%', "0%"],
                  },
                  data: [{
                      value: '',
                      name: '当前温度',
                  }],
                  title: {
                      show: false,
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: colorSet,
                          width: 25,
                          // shadowBlur: 15,
                          // shadowColor: '#B0C4DE',
                          shadowOffsetX: 0,
                          shadowOffsetY: 0,
                          opacity: 1
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: false,
                      length: 25,
                      lineStyle: {
                          color: '#00377a',
                          width: 2,
                          type: 'solid',
                      },
                  },
                  axisLabel: {
                      show: false
                  },
              },
              {
                  name: '灰色内圈', //刻度背景
                  type: 'gauge',
                  z: 2,
                  radius: '60%',
                  startAngle: '225',
                  endAngle: '-45',
                  //center: ["50%", "75%"], //整体的位置设置
                  axisLine: { // 坐标轴线
                      lineStyle: { // 属性lineStyle控制线条样式
                          color: [
                              [1, '#018DFF']
                          ],
                          width: 2,
                          opacity: 1, //刻度背景宽度
                      }
                  },
                  splitLine: {
                      show: false
                  },
                  // data: [{
                  //     show: false,
                  //     value: '80'
                  // }], //作用不清楚
                  axisLabel: {
                      show: false
                  },
                  pointer: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  detail: {
                      show: 0
                  }
              },
              {
                  name: "白色圈刻度",
                  type: "gauge",
                  radius: "60%",
                  startAngle: 225, //刻度起始
                  endAngle: -45, //刻度结束
                  z: 4,
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      length: 16, //刻度节点线长度
                      lineStyle: {
                          width: 2,
                          color: 'rgba(1,244,255, 0.9)'
                      } //刻度节点线
                  },
                  axisLabel: {
                      color: 'rgba(255,255,255,0)',
                      fontSize: 12,
                  }, //刻度节点文字颜色
                  pointer: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          opacity: 0
                      }
                  },
                  detail: {
                      show: false
                  },
                  data: [{
                      value: 0,
                      name: ""
                  }]
              },
              { //内圆
                  type: 'pie',
                  radius: '56%',
                  center: ['50%', '50%'],
                  z: 1,
                  itemStyle: {
                      normal: {
                          color: this.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                                  offset: 0,
                                  color: '#4978EC'
                              },
                              {
                                  offset: .5,
                                  color: '#1E2B57'
                              },
                              {
                                  offset: 1,
                                  color: '#141F3D'
                              }
                          ], false),
                          label: {
                              show: false
                          },
                          labelLine: {
                              show: false
                          }
                      },
                  },
                  hoverAnimation: false,
                  label: {
                      show: false,
                  },
                  tooltip: {
                      show: false
                  },
                  data: [100],
              },
          ]
        },
        chatDataRealTime2: {
          tooltip: {
              formatter: "{a} <br/>{b} : {c}%"
          },
          series: [{ //内圆
                  type: 'pie',
                  radius: '85%',
                  center: ['50%', '50%'],
                  z: 0,
                  itemStyle: {
                      normal: {
                          color: this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
                                  offset: 0,
                                  color: 'rgba(17,24,43,0)'
                              },
                              {
                                  offset: .5,
                                  // color: '#1E2B57'
                                  color:'rgba(28,42,91,.6)'
                              },
                              {
                                  offset: 1,
                                  color: '#141C33',
                                  // color:'rgba(17,24,43,0)'
                              }
                          ], false),
                          label: {
                              show: false
                          },
                          labelLine: {
                              show: false
                          }
                      },
                  },
                  hoverAnimation: false,
                  label: {
                      show: false,
                  },
                  tooltip: {
                      show: false
                  },
                  data: [100],
              },
              {
                  type: 'gauge',
                  name: '外层辅助',
                  radius: '74%',
                  startAngle: '225',
                  endAngle: '-45',
                  splitNumber: '100',
                  pointer: {
                      show: false
                  },
                  detail: {
                      show: false,
                  },
                  data: [{
                      value: 1
                  }],
                  // data: [{value: 1, name: 90}],
                  title: {
                      show: true,
                      offsetCenter: [0, 30],
                      textStyle: {
                          color: '#666',
                          fontStyle: 'normal',
                          fontWeight: 'normal',
                          fontFamily: '微软雅黑',
                          fontSize: 20,
                      }
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: [
                              [1, '#00FFFF']
                          ],
                          width: 2,
                          opacity: 1
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: true,
                      length: 20,
                      lineStyle: {
                          color: '#051932',
                          width: 0,
                          type: 'solid',
                      },
                  },
                  axisLabel: {
                      show: false
                  }
              },
              {
                  type: 'gauge',
                  radius: '70%',
                  startAngle: '225',
                  endAngle: '-45',
                  pointer: {
                      show: false
                  },
                  detail: {
                      formatter: function(value) {
                          var num = Math.round(value);
                          return '{bule|' + num + '}{white|db}' + '{size|' + '}\n{radius|综合健康评分}';
                      },
                      rich: rich,
                      "offsetCenter": ['0%', "0%"],
                  },
                  data: [{
                      value: '',
                      name: '当前噪音'
                  }],
                  title: {
                      show: false,
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: colorSet,
                          width: 25,
                          // shadowBlur: 15,
                          // shadowColor: '#B0C4DE',
                          shadowOffsetX: 0,
                          shadowOffsetY: 0,
                          opacity: 1
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: false,
                      length: 25,
                      lineStyle: {
                          color: '#00377a',
                          width: 2,
                          type: 'solid',
                      },
                  },
                  axisLabel: {
                      show: false
                  },
              },
              {
                  name: '灰色内圈', //刻度背景
                  type: 'gauge',
                  z: 2,
                  radius: '60%',
                  startAngle: '225',
                  endAngle: '-45',
                  //center: ["50%", "75%"], //整体的位置设置
                  axisLine: { // 坐标轴线
                      lineStyle: { // 属性lineStyle控制线条样式
                          color: [
                              [1, '#018DFF']
                          ],
                          width: 2,
                          opacity: 1, //刻度背景宽度
                      }
                  },
                  splitLine: {
                      show: false
                  },
                  // data: [{
                  //     show: false,
                  //     value: '80'
                  // }], //作用不清楚
                  axisLabel: {
                      show: false
                  },
                  pointer: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  detail: {
                      show: 0
                  }
              },
              {
                  name: "白色圈刻度",
                  type: "gauge",
                  radius: "60%",
                  startAngle: 225, //刻度起始
                  endAngle: -45, //刻度结束
                  z: 4,
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      length: 16, //刻度节点线长度
                      lineStyle: {
                          width: 2,
                          color: 'rgba(1,244,255, 0.9)'
                      } //刻度节点线
                  },
                  axisLabel: {
                      color: 'rgba(255,255,255,0)',
                      fontSize: 12,
                  }, //刻度节点文字颜色
                  pointer: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          opacity: 0
                      }
                  },
                  detail: {
                      show: false
                  },
                  data: [{
                      value: 0,
                      name: ""
                  }]
              },
              { //内圆
                  type: 'pie',
                  radius: '56%',
                  center: ['50%', '50%'],
                  z: 1,
                  itemStyle: {
                      normal: {
                          color: this.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                                  offset: 0,
                                  color: '#4978EC'
                              },
                              {
                                  offset: .5,
                                  color: '#1E2B57'
                              },
                              {
                                  offset: 1,
                                  color: '#141F3D'
                              }
                          ], false),
                          label: {
                              show: false
                          },
                          labelLine: {
                              show: false
                          }
                      },
                  },
                  hoverAnimation: false,
                  label: {
                      show: false,
                  },
                  tooltip: {
                      show: false
                  },
                  data: [100],
              },
          ]
        },
        chatDataRealTime3: {
          tooltip: {
              formatter: "{a} <br/>{b} : {c}%"
          },
          series: [{ //内圆
                  type: 'pie',
                  radius: '85%',
                  center: ['50%', '50%'],
                  z: 0,
                  itemStyle: {
                      normal: {
                          color: this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
                                  offset: 0,
                                  color: 'rgba(17,24,43,0)'
                              },
                              {
                                  offset: .5,
                                  // color: '#1E2B57'
                                  color:'rgba(28,42,91,.6)'
                              },
                              {
                                  offset: 1,
                                  color: '#141C33',
                                  // color:'rgba(17,24,43,0)'
                              }
                          ], false),
                          label: {
                              show: false
                          },
                          labelLine: {
                              show: false
                          }
                      },
                  },
                  hoverAnimation: false,
                  label: {
                      show: false,
                  },
                  tooltip: {
                      show: false
                  },
                  data: [100],
              },
              {
                  type: 'gauge',
                  name: '外层辅助',
                  radius: '74%',
                  startAngle: '225',
                  endAngle: '-45',
                  splitNumber: '100',
                  pointer: {
                      show: false
                  },
                  detail: {
                      show: false,
                  },
                  data: [{
                      value: 1
                  }],
                  // data: [{value: 1, name: 90}],
                  title: {
                      show: true,
                      offsetCenter: [0, 30],
                      textStyle: {
                          color: '#666',
                          fontStyle: 'normal',
                          fontWeight: 'normal',
                          fontFamily: '微软雅黑',
                          fontSize: 20,
                      }
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: [
                              [1, '#00FFFF']
                          ],
                          width: 2,
                          opacity: 1
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: true,
                      length: 20,
                      lineStyle: {
                          color: '#051932',
                          width: 0,
                          type: 'solid',
                      },
                  },
                  axisLabel: {
                      show: false
                  }
              },
              {
                  type: 'gauge',
                  radius: '70%',
                  startAngle: '225',
                  endAngle: '-45',
                  pointer: {
                      show: false
                  },
                  detail: {
                      formatter: function(value) {
                          var num = Math.round(value);
                          return '{bule|' + num + '}{white|PM2.5}' + '{size|' + '}\n{radius|综合健康评分}';
                      },
                      rich: rich,
                      "offsetCenter": ['0%', "0%"],
                  },
                  data: [{
                      value: '',
                      name: '当前扬尘'
                  }],
                  title: {
                      show: false,
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: colorSet,
                          width: 25,
                          // shadowBlur: 15,
                          // shadowColor: '#B0C4DE',
                          shadowOffsetX: 0,
                          shadowOffsetY: 0,
                          opacity: 1
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: false,
                      length: 25,
                      lineStyle: {
                          color: '#00377a',
                          width: 2,
                          type: 'solid',
                      },
                  },
                  axisLabel: {
                      show: false
                  },
              },
              {
                  name: '灰色内圈', //刻度背景
                  type: 'gauge',
                  z: 2,
                  radius: '60%',
                  startAngle: '225',
                  endAngle: '-45',
                  //center: ["50%", "75%"], //整体的位置设置
                  axisLine: { // 坐标轴线
                      lineStyle: { // 属性lineStyle控制线条样式
                          color: [
                              [1, '#018DFF']
                          ],
                          width: 2,
                          opacity: 1, //刻度背景宽度
                      }
                  },
                  splitLine: {
                      show: false
                  },
                  // data: [{
                  //     show: false,
                  //     value: '80'
                  // }], //作用不清楚
                  axisLabel: {
                      show: false
                  },
                  pointer: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  detail: {
                      show: 0
                  }
              },
              {
                  name: "白色圈刻度",
                  type: "gauge",
                  radius: "60%",
                  startAngle: 225, //刻度起始
                  endAngle: -45, //刻度结束
                  z: 4,
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      length: 16, //刻度节点线长度
                      lineStyle: {
                          width: 2,
                          color: 'rgba(1,244,255, 0.9)'
                      } //刻度节点线
                  },
                  axisLabel: {
                      color: 'rgba(255,255,255,0)',
                      fontSize: 12,
                  }, //刻度节点文字颜色
                  pointer: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          opacity: 0
                      }
                  },
                  detail: {
                      show: false
                  },
                  data: [{
                      value: 0,
                      name: ""
                  }]
              },
              { //内圆
                  type: 'pie',
                  radius: '56%',
                  center: ['50%', '50%'],
                  z: 1,
                  itemStyle: {
                      normal: {
                          color: this.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                                  offset: 0,
                                  color: '#4978EC'
                              },
                              {
                                  offset: .5,
                                  color: '#1E2B57'
                              },
                              {
                                  offset: 1,
                                  color: '#141F3D'
                              }
                          ], false),
                          label: {
                              show: false
                          },
                          labelLine: {
                              show: false
                          }
                      },
                  },
                  hoverAnimation: false,
                  label: {
                      show: false,
                  },
                  tooltip: {
                      show: false
                  },
                  data: [100],
              },
          ]
        },
        chatData4: {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
            type: 'category',
              boundaryGap: false,//坐标轴两边留白
            data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
            axisLabel: { //坐标轴刻度标签的相关设置。
              // interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
              textStyle: {
                color: '#1B253A',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              },
              formatter:function(params) {
                        var newParamsName = "";
                        var paramsNameNumber = params.length;
                        var provideNumber = 4;  //一行显示几个字
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                        if (paramsNameNumber > provideNumber) {
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = "";
                                var start = p * provideNumber;
                                var end = start + provideNumber;
                                if (p == rowNumber - 1) {
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    tempStr = params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr;
                            }

                        } else {
                            newParamsName = params;
                        }
                        return newParamsName
                    },
              //rotate:50,
            },
            axisTick:{//坐标轴刻度相关设置。
              show: false,
            },
            axisLine:{//坐标轴轴线相关设置
              lineStyle:{
                color:'#E5E9ED',
                // opacity:0.2
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                color: '#E5E9ED',
              // 	opacity:0.1
              }
            }
            },
            yAxis: [
            {
              type: 'value',
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                }
              },
              axisLine:{
                show: false
              },
              axisTick:{
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#E5E9ED',
                // 	opacity:0.1
                }
              }

            }
          ],
            series: [
                {
                    name: '2019',
                    type: 'line',
                    itemStyle: {
                      normal: {
                          color:'#3A84FF',
                          lineStyle: {
                      color: "#3A84FF",
                      width:1
                          },
                          areaStyle: {
                      color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: 'rgba(58,132,255,0)'
                      }, {
                        offset: 1,
                        color: 'rgba(58,132,255,0.35)'
                      }]),
                          }
                      }
                    },
                    data: [9,6,7,6,8,6,9,6,7,6,8,6,9,6,7,6,8,6,3,8,2,7,2,8,6,7,6,8,6,3,8]
                },
                {
                    name: '2019',
                    type: 'line',
                    itemStyle: {
                      normal: {
                          color:'rgba(255,80,124,1)',
                          lineStyle: {
                      color: "rgba(255,80,124,1)",
                      width:1
                          },
                          areaStyle: {
                      color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: 'rgba(255,80,124,0)'
                      }, {
                        offset: 1,
                        color: 'rgba(255,80,124,0.35)'
                      }]),
                          }
                      }
                    },
                    data: [9,6,7,6,8,6,9,6,7,6,8,6,3,8,2,6,8,6,9,6,7,7,2,8,8,6,9,6,7,7,2]
                }
            ]
        },
        chatData1: {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
            type: 'category',
              boundaryGap: false,//坐标轴两边留白
            data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
            axisLabel: { //坐标轴刻度标签的相关设置。
              // interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
              textStyle: {
                color: '#1B253A',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              },
              formatter:function(params) {
                        var newParamsName = "";
                        var paramsNameNumber = params.length;
                        var provideNumber = 4;  //一行显示几个字
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                        if (paramsNameNumber > provideNumber) {
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = "";
                                var start = p * provideNumber;
                                var end = start + provideNumber;
                                if (p == rowNumber - 1) {
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    tempStr = params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr;
                            }

                        } else {
                            newParamsName = params;
                        }
                        return newParamsName
                    },
              //rotate:50,
            },
            axisTick:{//坐标轴刻度相关设置。
              show: false,
            },
            axisLine:{//坐标轴轴线相关设置
              lineStyle:{
                color:'#E5E9ED',
                // opacity:0.2
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                color: '#E5E9ED',
              // 	opacity:0.1
              }
            }
            },
            yAxis: [
            {
              type: 'value',
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                }
              },
              axisLine:{
                show: false
              },
              axisTick:{
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#E5E9ED',
                // 	opacity:0.1
                }
              }

            }
          ],
            series: [
                {
                    name: '2019',
                    type: 'line',
                    itemStyle: {
                      normal: {
                          color:'#3A84FF',
                          lineStyle: {
                      color: "#3A84FF",
                      width:1
                          },
                          areaStyle: {
                      color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: 'rgba(58,132,255,0)'
                      }, {
                        offset: 1,
                        color: 'rgba(58,132,255,0.35)'
                      }]),
                          }
                      }
                    },
                    data: [9,6,7,6,8,6,9,6,7,6,8,6,9,6,7,6,8,6,3,8,2,7,2,8]
                },
                {
                    name: '2019',
                    type: 'line',
                    itemStyle: {
                      normal: {
                          color:'rgba(255,80,124,1)',
                          lineStyle: {
                      color: "rgba(255,80,124,1)",
                      width:1
                          },
                          areaStyle: {
                      color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: 'rgba(255,80,124,0)'
                      }, {
                        offset: 1,
                        color: 'rgba(255,80,124,0.35)'
                      }]),
                          }
                      }
                    },
                    data: [9,6,7,6,8,6,9,6,7,6,8,6,3,8,2,6,8,6,9,6,7,7,2,8]
                }
            ]
        },
        chatDataMonth: {
           xAxis: {
                  type: 'category',
                  data: [],
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: [],
                  type: 'line'
              }]
        },
        chatDataMonth1: {
           xAxis: {
                  type: 'category',
                  data: [],
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: [],
                  type: 'line'
              }]
        },
        chatDataMonth2: {
           xAxis: {
                  type: 'category',
                  data: [],
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: [],
                  type: 'line'
              }]
        },
        chatDataMonth3: {
           xAxis: {
                  type: 'category',
                  data: [],
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: [],
                  type: 'line'
              }]
        },
        chatDataDay: {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,//坐标轴两边留白
              data: [],
              axisLabel: { //坐标轴刻度标签的相关设置。
              //	margin:15,
                textStyle: {
                  color: '#1B253A',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
                formatter:function(params) {
                          var newParamsName = "";
                          var paramsNameNumber = params.length;
                          var provideNumber = 4;  //一行显示几个字
                          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                          if (paramsNameNumber > provideNumber) {
                              for (var p = 0; p < rowNumber; p++) {
                                  var tempStr = "";
                                  var start = p * provideNumber;
                                  var end = start + provideNumber;
                                  if (p == rowNumber - 1) {
                                      tempStr = params.substring(start, paramsNameNumber);
                                  } else {
                                      tempStr = params.substring(start, end) + "\n";
                                  }
                                  newParamsName += tempStr;
                              }

                          } else {
                              newParamsName = params;
                          }
                          return newParamsName
                      },
              //rotate:50,
            },
            axisTick:{//坐标轴刻度相关设置。
              show: false,
            },
            axisLine:{//坐标轴轴线相关设置
              lineStyle:{
                color:'#E5E9ED',
                // opacity:0.2
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                color: '#E5E9ED',
              // 	opacity:0.1
              }
            }
            },
            yAxis: [
            {
              type: 'value',
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                }
              },
              axisLine:{
                show: false
              },
              axisTick:{
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#E5E9ED',
                // 	opacity:0.1
                }
              }
            }
          ],
            series: [
                {
                    name: '2019',
                    type: 'line',
                    itemStyle: {
                    normal: {
                        color:'#E2DA02',
                        lineStyle: {
                    color: "#E2DA02",
                    width:1
                        },
                        areaStyle: {
                    color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: 'rgba(46,493,302,0)'
                    }, {
                      offset: 1,
                      color: 'rgba(46,493,302,0.35)'
                    }]),
                        }
                    }
                  },
                    data: []
                }
            ]
        },
        chatDataDay1: {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,//坐标轴两边留白
              data: [],
              axisLabel: { //坐标轴刻度标签的相关设置。
              //	margin:15,
                textStyle: {
                  color: '#1B253A',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
                formatter:function(params) {
                          var newParamsName = "";
                          var paramsNameNumber = params.length;
                          var provideNumber = 4;  //一行显示几个字
                          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                          if (paramsNameNumber > provideNumber) {
                              for (var p = 0; p < rowNumber; p++) {
                                  var tempStr = "";
                                  var start = p * provideNumber;
                                  var end = start + provideNumber;
                                  if (p == rowNumber - 1) {
                                      tempStr = params.substring(start, paramsNameNumber);
                                  } else {
                                      tempStr = params.substring(start, end) + "\n";
                                  }
                                  newParamsName += tempStr;
                              }

                          } else {
                              newParamsName = params;
                          }
                          return newParamsName
                      },
              //rotate:50,
            },
            axisTick:{//坐标轴刻度相关设置。
              show: false,
            },
            axisLine:{//坐标轴轴线相关设置
              lineStyle:{
                color:'#E5E9ED',
                // opacity:0.2
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                color: '#E5E9ED',
              // 	opacity:0.1
              }
            }
            },
            yAxis: [
            {
              type: 'value',
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                }
              },
              axisLine:{
                show: false
              },
              axisTick:{
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#E5E9ED',
                // 	opacity:0.1
                }
              }
            }
          ],
            series: [
                {
                    name: '2019',
                    type: 'line',
                    itemStyle: {
                    normal: {
                        color:'#E2DA02',
                        lineStyle: {
                    color: "#E2DA02",
                    width:1
                        },
                        areaStyle: {
                    color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: 'rgba(46,493,302,0)'
                    }, {
                      offset: 1,
                      color: 'rgba(46,493,302,0.35)'
                    }]),
                        }
                    }
                  },
                    data: []
                }
            ]
        },
        chatDataDay2: {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,//坐标轴两边留白
              data: [],
              axisLabel: { //坐标轴刻度标签的相关设置。
              //	margin:15,
                textStyle: {
                  color: '#1B253A',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
                formatter:function(params) {
                          var newParamsName = "";
                          var paramsNameNumber = params.length;
                          var provideNumber = 4;  //一行显示几个字
                          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                          if (paramsNameNumber > provideNumber) {
                              for (var p = 0; p < rowNumber; p++) {
                                  var tempStr = "";
                                  var start = p * provideNumber;
                                  var end = start + provideNumber;
                                  if (p == rowNumber - 1) {
                                      tempStr = params.substring(start, paramsNameNumber);
                                  } else {
                                      tempStr = params.substring(start, end) + "\n";
                                  }
                                  newParamsName += tempStr;
                              }

                          } else {
                              newParamsName = params;
                          }
                          return newParamsName
                      },
              //rotate:50,
            },
            axisTick:{//坐标轴刻度相关设置。
              show: false,
            },
            axisLine:{//坐标轴轴线相关设置
              lineStyle:{
                color:'#E5E9ED',
                // opacity:0.2
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                color: '#E5E9ED',
              // 	opacity:0.1
              }
            }
            },
            yAxis: [
            {
              type: 'value',
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                }
              },
              axisLine:{
                show: false
              },
              axisTick:{
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#E5E9ED',
                // 	opacity:0.1
                }
              }
            }
          ],
            series: [
                {
                    name: '2019',
                    type: 'line',
                    itemStyle: {
                    normal: {
                        color:'#E2DA02',
                        lineStyle: {
                    color: "#E2DA02",
                    width:1
                        },
                        areaStyle: {
                    color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: 'rgba(46,493,302,0)'
                    }, {
                      offset: 1,
                      color: 'rgba(46,493,302,0.35)'
                    }]),
                        }
                    }
                  },
                    data: []
                }
            ]
        },
        chatDataDay3: {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,//坐标轴两边留白
              data: [],
              axisLabel: { //坐标轴刻度标签的相关设置。
              //	margin:15,
                textStyle: {
                  color: '#1B253A',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
                formatter:function(params) {
                          var newParamsName = "";
                          var paramsNameNumber = params.length;
                          var provideNumber = 4;  //一行显示几个字
                          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                          if (paramsNameNumber > provideNumber) {
                              for (var p = 0; p < rowNumber; p++) {
                                  var tempStr = "";
                                  var start = p * provideNumber;
                                  var end = start + provideNumber;
                                  if (p == rowNumber - 1) {
                                      tempStr = params.substring(start, paramsNameNumber);
                                  } else {
                                      tempStr = params.substring(start, end) + "\n";
                                  }
                                  newParamsName += tempStr;
                              }

                          } else {
                              newParamsName = params;
                          }
                          return newParamsName
                      },
              //rotate:50,
            },
            axisTick:{//坐标轴刻度相关设置。
              show: false,
            },
            axisLine:{//坐标轴轴线相关设置
              lineStyle:{
                color:'#E5E9ED',
                // opacity:0.2
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                color: '#E5E9ED',
              // 	opacity:0.1
              }
            }
            },
            yAxis: [
            {
              type: 'value',
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                }
              },
              axisLine:{
                show: false
              },
              axisTick:{
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#E5E9ED',
                // 	opacity:0.1
                }
              }
            }
          ],
            series: [
                {
                    name: '2019',
                    type: 'line',
                    itemStyle: {
                    normal: {
                        color:'#E2DA02',
                        lineStyle: {
                    color: "#E2DA02",
                    width:1
                        },
                        areaStyle: {
                    color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: 'rgba(46,493,302,0)'
                    }, {
                      offset: 1,
                      color: 'rgba(46,493,302,0.35)'
                    }]),
                        }
                    }
                  },
                    data: []
                }
            ]
        },
        tabList: ['风速监测', '温度检测', '噪音检测', '扬尘监测'],
        temperatureData: '',
        noiseData: '',
        windData: '',
        dustData: '',
      }
    },
    methods:{
      // 风速监测
      getWindSpeed() {
        environmentalMonitorAPI.getWindSpeed().then(res => {
          this.windData = res
          this.chatDataRealTime.series[2].data[0].value = res.value1
        })
      },
      // 噪音监测
      getNoise() {
        environmentalMonitorAPI.getNoise().then(res => {
          this.noiseData = res
          this.chatDataRealTime2.series[2].data[0].value = res.value1
        })
      },
      // 温度监测
      getTemperature() {
        environmentalMonitorAPI.getTemperature().then(res => {
          this.temperatureData = res
          this.chatDataRealTime1.series[2].data[0].value = res.value1
        })
      },
      // 扬尘监测
      getDust() {
        environmentalMonitorAPI.getDust().then(res => {
          this.dustData = res
          this.chatDataRealTime3.series[2].data[0].value = res.value1
        })
      },
      // 获取监测数据
      getData () {
        environmentalMonitorAPI.getStatistics().then(res => {
          this.chatDataDay3.series[0].data = res.dayData.map(item => {
            return item.dust
          })
          this.chatDataMonth3.series[0].data = res.monthData.map(item => {
            return item.dust
          })
          this.chatDataDay2.series[0].data = res.dayData.map(item => {
            return item.noise
          })
          this.chatDataMonth2.series[0].data = res.monthData.map(item => {
            return item.noise
          })
          this.chatDataDay1.series[0].data = res.dayData.map(item => {
            return item.temperature
          })
          this.chatDataMonth1.series[0].data = res.monthData.map(item => {
            return item.temperature
          })
          this.chatDataDay.series[0].data = res.dayData.map(item => {
            return item.wind
          })
          this.chatDataMonth.series[0].data = res.monthData.map(item => {
            return item.wind
          })
          this.dayList = res.dayData.map(item => {
            return item.time
          })
          this.monthList = res.monthData.map(item => {
            return item.time
          })
          this.chatDataDay.xAxis.data = this.dayList
          this.chatDataDay1.xAxis.data = this.dayList
          this.chatDataDay2.xAxis.data = this.dayList
          this.chatDataDay3.xAxis.data = this.dayList
          this.chatDataMonth.xAxis.data = this.monthList
          this.chatDataMonth1.xAxis.data = this.monthList
          this.chatDataMonth2.xAxis.data = this.monthList
          this.chatDataMonth3.xAxis.data = this.monthList
        })
      }
    },
    mounted() {
      this.getData()
      this.getDust()
      this.getNoise()
      this.getTemperature()
      this.getWindSpeed()
    }
  }
</script>

<style scoped lang="scss">
  .environmentalMonitor{
    .title{
      padding: 0.625rem;
      font-size: 0.875rem;
      div{
        margin: 0.3125rem;
        border-left: 0.125rem solid #1577FF;
        padding-left: 0.3125rem;
      }
    }
    /deep/ .van-tabs__wrap{
      height: 2.75rem;
      line-height: 2.75rem;
      .van-tabs__nav--card{
        border: inherit;
        margin: inherit;
        .van-tab.van-tab--active{
          background-color: #fff;
          color: #1577FF;
        }
        .van-tab{
          border: inherit;
          height: 2.75rem;
          line-height: 2.75rem;
          color: #999;
          background-color: #EBEBEB;;
        }
      }
    }
  }
</style>
